<template>
	<view class="container">
		<top-back-navbar position="fixed" title="我的提货-订单详情" background="#6A41EA" color="#ffff"></top-back-navbar>
		<view class="address">
			<view class="address-group">
				<view style="padding: 30rpx;">
					<view class="address-person">
						<view class="address-person-text">{{res.address.realname}}</view> 
						<view class="address-person-text">{{res.address.mobile}}</view>
					</view>
					<view class="address-city">{{res.address.province}}{{res.address.city}}{{res.address.area}}</view>
					<view class="address-address">{{res.address.street}}{{res.address.address}}</view>
				</view>
			</view>
		</view>
		
		<view class="list-group">
				<view class="goods">
					<view class="goods-title">订单号：{{res.ordersn}}</view>
					<view class="goods-status">
						<text style="background-color: #e2e1e9;">已取消</text>
						<text style="background-color: #e2e1e9;" v-if="res.status == -1">已取消</text>
						<text style="background-color: #eab046;" v-if="res.status == 0">待付款</text>
						<text style="background-color: #c5000b;" v-if="res.status == 1">待发货</text>
						<text style="background-color: #001b4d;" v-if="res.status == 2">待收货</text>
						<text style="background-color: #32a97c;" v-if="res.status == 3">已完成</text>
					</view>
					<view class="goods-infos">
						<block v-for='(item,i) in res.goods' :key = 'i'>
							<view class="goods-infos-box">
								<image :src="item.thumb" mode="aspectFill"></image>
								<view class="goods-infos-right">
									<view class="ellipsis-2">{{item.title}}</view>
									<view class="ellipsis-3">
										<text style="color:#7f7f80;">x{{item.total}}</text>
										<text style="color: #000;font-weight: bold;">￥{{item.price}}</text>
									</view>
									<view style="font-size: 28rpx;color:#7f7f80;">运费：¥{{res.dispatchprice}}</view>
								</view>
							</view>
						</block>
					</view>
					<view class="bottom">
						共{{res.goods.length}}件商品 实付: <text>{{res.goodsprice-res.tongduibao-res.jindou}}</text>
					</view>
					<view class="bottom-jf" v-if="Math.abs(res.tongduibao)!=0 || Math.abs(res.jindou)!=0">
						<text v-if="Math.abs(res.tongduibao)!=0"> +通兑宝抵扣: {{res.tongduibao}} </text>
						<text v-if="Math.abs(res.jindou)!=0"> +金豆抵扣: {{res.jindou}} </text>
					</view>
				</view>
		 </view>
		 <view class="address">
		 	<view class="address-group">
		 		<view style="padding: 30rpx;">
		 			<view class="address-person">
		 				<view class="address-person-text">订单信息</view> 
		 			</view>
		 			<view class="address-city">订单编号：{{res.ordersn}}</view>
					<view class="address-city">创建时间：{{res.createtime}}</view>
					<view class="address-city" v-if="res.status >=1 &&res.paytime >0">支付时间：{{res.paytime}}</view>
					<view class="address-city" v-if="res.status >=2||res.status>=1 &&res.sendtype >0">发货时间：{{res.sendtime}}</view>
		 		</view>
		 	</view>
		 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				res: [],
				orderid: 0,
				openid: ''
			};
		},
		onLoad: function(e) {
			uni.showLoading()
			this.orderid = e.id
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data
					this.setAjax()
				},
				fail: () => {
					uni.navigateTo({
						url: '../../login/login'
					});
				}
			});
		},
		methods: {
			setAjax() {
				uni.request({
					url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=order.detail&app=1&id=' +
						this.orderid,
					method: 'POST',
					data: {
						'openid': this.openid
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: res => {
						console.log(res)
						uni.hideLoading()
						this.res = res.data
					},
					fail: () => {},
					complete: () => {}
				});
			},
			jump() {
				uni.navigateTo({
					url: '../express/express?id=' + this.orderid
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
	  background-color: #f2f5fa;
	}
	.address {
		position: relative;
		padding:30rpx;
	}
	
	.address-group{
		border-radius: 18rpx;
		background-color: #fff;
		position: relative;
		box-shadow: 0 4px 10px 0 rgba(0,0,0,.2);
		.address-person{
			display: flex;
			align-items: center;
		}
		.address-person-text{
			font-size: 30rpx;
			font-weight: 550;
			padding-right:60rpx;
		} 
		.address-city{
			margin-top:20rpx;
			font-size: 28rpx;
			color:#7f7f80;
		} 
		.address-address{
			font-size: 28rpx;
			color:#7f7f80;
		}
	}
	
	.container {
	  width: 100%;
	  height: 100vh;
	  padding-top:80rpx;
	  box-sizing: border-box;
	}
	.list-group{
		padding:0 30rpx 30rpx 30rpx;
	}
	.goods{
		background-color: #fff;
		border-radius: 20rpx;
		padding:30rpx;
		position: relative;
		.goods-title{
			font-size: 30rpx;
			color:#7f7f80;
			padding-bottom:20rpx;
		}
		.goods-status{
			position: absolute;
			top:0;
			right:0;
			text{
				display: inline-block;
				height: 50rpx;
				padding:0 30rpx;
				border-radius: 0 25rpx 0 25rpx;
				font-size:32rpx;
				color:#7f7f80;
			}
		}
		.goods-info{
			padding:15rpx 0;
		}
		.goods-infos-box{
			display: flex;
			image{
				width: 260rpx;
				height: 260rpx;
				background-color: #04b815;
				border-radius: 10rpx;
			}
			.goods-infos-right{
				padding-left:30rpx;
				flex:1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.ellipsis-2{
					font-size:30rpx;
					font-weight: 600;
				}
				.ellipsis-3{
					font-size:30rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;  
				}
			}
		}
		.bottom{
			font-size: 28upx;
			text-align: right;
			padding: 10upx 0;
			color:#7f7f80;
			text{
				color:#d9433d;
				font-weight: 600;
			}
		}
		.bottom-jf{
			font-size: 28upx;
			text-align: right;
			padding: 10upx 0;
			color:#7f7f80;
		}
		.bottom-button{
			padding-top:30rpx;
			border-top-width:1px solid #f0f0f0;
			display: flex;
			align-items: center;
			button{
				width: 180rpx;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 30rpx;
				border-radius: 60rpx;
				border-width:1px;
				border-style:solid;
			}
		}
	}
</style>
